<script setup>
import { ref, watch } from "vue";
const num = ref(20);
const obj = ref({
  age: 88,
});
const btn = () => {
  num.value++;
  obj.value.age++;
};
// 第一个参数是数据源,第二个参数是执行函数,第三个参数则是额外的命令
// 监听普通数据类型时,这里有新旧值
// watch(
//   num,
//   (newVal, oldVal) => {
//     console.log(newVal, oldVal);
//   },
//   {
//     immediate: true, //是否需要立即监听
//   }
// );
// 监听复杂数据类型时,事件源指向响应式对象,这里没有新旧值,需要开启深度监听才能监听得到
// watch(
//   obj,
//   (newVal, oldVal) => {
//     console.log(newVal, oldVal);
//   },
//   {
//     deep: true, //开启深度监听
//     immediate: true, //开启立即监听
//   }
// );
// 利用函数形式监听复杂数据类型,可监听新旧值,不用深度监听
// watch(
//   () => obj.value.age,
//   (newVal, oldVal) => {
//     console.log(newVal, oldVal);
//   }
// );
// 同时监听多个数据类型,返回的也是一个数组,而且也监听不到复杂数据类型的旧值
watch(
  [num, () => obj.value.age],
  (newVal, oldVal) => {
    console.log(newVal, oldVal);
  },
  {
    deep: true,
  }
);
</script>

<template>
  <div>{{ num }}--------{{ obj.age }}</div>
  <button @click="btn">点击</button>
</template>

<style lang="scss" scoped></style>
